<template>
	<view>
		<u-popup :show="moreShow" mode="bottom" :round="15" :safeAreaInsetBottom="false" @close="moreShow = false">
			<view>
				<view class="tips">
					<view @click="clearCard">
						<image src="../../../static/image/clear.png"></image>
						<text>清空购物车</text>
					</view>
					<u-icon name="close" color="#979797" size="18" @click="moreShow = false"></u-icon>
				</view>
				<view class="set-pads">
					<view class="product" v-for="(it, ix) in getList" :key="ix">
						<image mode="aspectFill" :src="it.image"></image>
						<view>
							<view class="names">
								<text>{{ it.ruleName }}</text>
								<view hover-class="hover_class" @click="delShop(ix)">删除</view>
							</view>
							<view class="des">{{ it.describe }}</view>
							<view class="btns">
								<view class="prices">
									<text>¥</text>{{ it.rulePrice }}/{{it.price_unit}}
								</view>
								<setNum :dataNum="it.num" :min="it.min_bynum" @nums="nums($event,ix, it)"/>
							</view>
						</view>
					</view>
					<view class="card-rows set-bot">
						<view>
							<image src="../../../static/image/card.png"></image>
							<view>
								<text>¥</text>{{ getTotal }}
							</view>
							<text>已选{{getList.length}}件</text>
						</view>
						<view @click="setOrder" hover-class="hover_class">去结算</view>
					</view>
				</view>
			</view>
		</u-popup>
		<view class="shop-car" v-show="!moreShow">
			<view class="card-rows">
				<view @click="openMore">
					<image src="../../../static/image/card.png"></image>
					<view>
						<text>¥</text>{{ getTotal }}
					</view>
					<text>已选{{ getList.length }}件</text>
				</view>
				<view @click="setOrder" hover-class="hover_class">去结算</view>
			</view>
		</view>
	</view>
</template>

<script>
	import setNum from './setNum'
	import store from '@/store'
	import {
		userIndex
	} from 'utils/api/user.js'
	export default {
		components: {
			setNum
		},
		data() {
			return {
				moreShow: false
			}
		},
		computed: {
			getList() {
				return store.state.cardList
			},
			getTotal() {
				let total = 0
				store.state.cardList.forEach((it) => {
					total += Number(it.totalPrice)
				})
				return total || 0
			}
		},
		methods: {
			// 清空
			clearCard() {
				store.commit('clearCard')
			},
			delShop(index) {
				store.commit('delCard', index)
			},
			// 设置数量
			nums(num, ix, item) {
				store.commit('updateCard', {
					index: ix,
					num,
					totalPrice: Number(item.rulePrice) * num
				})
			},
			openMore() {
				this.moreShow = true
			},
			async setOrder() {
				let userInfo = await userIndex()
				if(!userInfo.data.idCardFront) {
					uni.navigateTo({
						url: `/userPackage/pages/realName/index`
					})
					return
				}
				if(this.getList.length === 0) {
					return uni.showToast({
						title: '请选择产品',
						icon: 'none'
					})
				}
				uni.navigateTo({
					url: `/userPackage/pages/supplierOrder/index?status=${userInfo.data.contractSignStatus}`
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.set-bot {
	margin-bottom: 28upx;
}
.set-pads {
	box-sizing: border-box;
	padding: 36upx 26upx 0 26upx;
}
.product {
	display: flex;
	margin-bottom: 36upx;
	>image {
		width: 180upx;
		height: 180upx;
		border-radius: 10upx;
		flex-shrink: 0;
		background-color: #F0F0F0;
		margin-right: 22upx;
	}
	>view {
		flex: 1;
		display: flex;
		flex-direction: column;
		min-width: 0;
		.names {
			font-size: 32upx;
			color: #333333;
			line-height: 42upx;
			font-weight: 600;
			margin-bottom: 10upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			>text {
				white-space: nowrap; //禁止换行
				overflow: hidden;
				text-overflow: ellipsis;
			}
			>view {
				font-size: 30upx;
				flex-shrink: 0;
				color: #023F92;
			}
		}
		.des {
			font-size: 24upx;
			color: #9E9E9E;
			line-height: 34upx;
			white-space: nowrap; //禁止换行
			overflow: hidden;
			text-overflow: ellipsis;
			display: inline-block;
		}
		.btns {
			display: flex;
			margin-top: 44upx;
			align-items: center;
			justify-content: space-between;
			>.prices {
				font-size: 30upx;
				font-weight: 500;
				color: #DC0000;
				>text {
					font-size: 24upx;
				}
			}
		}
		.coupon {
			font-size: 20upx;
			color: #ED0900;
			height: 36upx;
			line-height: 33upx;
			display: inline-block;
			margin-top: 12upx;
			box-sizing: border-box;
			padding: 0 12upx;
			border: 1px solid #ED0900;
			border-radius: 8upx;
		}
	}
}
.tips {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	height: 70upx;
	background-color: #FFF3CC;
	border-radius: 15upx 15upx 0 0;
	padding: 0 28upx;
	>view:nth-of-type(1) {
		display: flex;
		align-items: center;
		>image {
			width: 24upx;
			height: 24upx;
			margin-right: 6upx;
		}
		>text {
			font-size: 28upx;
			color: #6C6C6C;
		}
	}
}
.shop-car {
	position: fixed;
	bottom: 28upx;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	padding: 0 30upx;
}
.card-rows {
	width: 100%;
	height: 100upx;
	border-radius: 50upx;
	background-color: #fff;
	display: flex;
	overflow: hidden;
	align-items: center;
	>view:nth-of-type(1) {
		flex: 1;
		display: flex;
		align-items: center;
		>image {
			width: 80upx;
			height: 80upx;
			margin-left: 14upx;
			margin-right: 8upx;
		}
		>view {
			font-size: 32upx;
			font-size: 600;
			color: #DC0B03;
			>text {
				font-size: 24upx;
			}
		}
		>text {
			font-size: 20upx;
			color: #DC0B03;
			margin-top: 6upx;
			margin-left: 20upx;
		}
	}
	>view:nth-of-type(2) {
		width: 220upx;
		height: 100upx;
		background-color: #023F92;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32upx;
		color: #FFFFFF;
		border-radius: 50upx;
	}
}
</style>